<template>
  <div>
    <el-dialog
      title="新增设备"
      :visible="dialogVisible"
      width="35%"
      @close="handleClose"
    >
      <p>设备编号：系统自动生成</p>
      <el-form ref="addForm" :inline="true" :model="formInline" class="demo-form-inline" :rules="rules">
        <el-form-item label="选择型号" prop="vmType">
          <el-select v-model="formInline.vmType" placeholder="请选择">
            <el-option v-for="item in vendingType" :key="item.typeId" :label="item.name" :value="item.typeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位" prop="nodeId">
          <el-select v-model="formInline.nodeId" placeholder="请选择">
            <el-option v-for="item in nodeType" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button v-loading="loading" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addVendingAPI } from '@/api/vmIndex'
export default {
  name: 'DialogXinjian',
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    vendingType: {
      type: Array,
      default: () => []
    },
    nodeType: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formInline: {
        vmType: '',
        nodeId: ''
      },
      rules: {
        model: [{ required: true, message: '必填' }],
        node: [{ required: true, message: '必填' }]
      },
      loading: false,
      vmType: 1, // 售货机类型Id
      nodeId: '5', // 所属点位Id
      createUserId: 1 // 	创建人Id
    }
  },
  computed: {
  },
  watch: {},
  created() {},
  methods: {
    // 哪里关闭 就在哪里调用
    handleClose() {
      this.$emit('update:dialogVisible', false)
      this.$refs.addForm.resetFields() // 制空表单
      this.formInline = {} // 指控表单
    },
    // 提交
    async submit() {
      try {
        this.loading = true
        this.$refs.addForm.validate()// 提交的时候对整个表单进行校验
        await addVendingAPI(this.vmType, this.nodeId, this.createUserId)
        // 添加成功以后  再次刷新页面
        // console.log(res)
        this.$message.success('新建成功')
        this.$emit('addFlush') // 子组件控制父组件 刷新页面
        this.handleClose() // 关闭
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>

</style>
